<template>
    <div id="searchResult">
        <van-cell style="text-align: right; font-size: 18px;" title="心动模式">
            <template #right-icon>
                <van-switch v-model="checked" active-color="#FF69B4" style="margin:0 10px;" />
            </template>
        </van-cell>
        <form action="/">
            <van-search
            v-model="searchText"
            show-action
            placeholder="请输入内容进行搜索"
            @search="onSearch"
            @cancel="onCancel"
            />
        </form>
        <div v-for="user in users" :key="user.id" @scroll="asyncLoadData">
            <van-card
            style="text-align: left;"
            :desc="user.profile"
            :title="user.nickName"
            >
            <template #thumb>
                <van-image
                    width="60px"
                    height="60px"
                    fit="cover"
                    position="left"
                    :src="defaultUserImage"
                />
            </template>
            <template #tags>
                <van-tag style="margin-right: 8px;" round type="primary" v-for="tag in user.tags" :key="tag">{{ tag }}</van-tag>
            </template>
            <template #footer>
                <van-button size="mini" @click="contactMe(user)">联系我</van-button>
            </template>
            </van-card>
        </div>
        <van-empty v-if="users.length === 0" image="search" description="暂无信息" />
    </div>
</template>

<style scoped>
.vn-toast--text{
    background: rgba(0, 0, 0, 0.7);
}
</style>

<script setup>
import { showFailToast,showConfirmDialog } from "vant";
import { onMounted, reactive, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import Myaxios from "../plugins/MyAxios"
import defaultUserImage from "../tempImageFiles/defaultUser.png";

const route = useRoute();
const router = useRouter();
const users = ref([])
const pageNum = ref(1)
const pageSize = ref(1000)
const searchText = ref('')
const searchByNameForm = reactive({
  nickName: ""
})
const checked = ref(false)

onMounted(()=>{
    getUser()
})


const recommend = async () =>{
    const res = await Myaxios.post('/recommend',null,{
        params: {
            pageNum: pageNum.value,
            pageSize: pageSize.value
        }
    })
    if(res.data.code === 200){
        users.value = res.data.data
    }else{
        showFailToast("获取信息失败，" + res.data.message)
    }
}

const getUser = async ()=>{
    const res = await Myaxios.post("/currentUser");
    if(res.data.code === 402){
        router.push({
            path: '/login',
        });
    }
    if(res.data.code === 200){
        recommend()
    }
    else{
        showFailToast("系统繁忙" + res.data.message)
    }
}

const asyncLoadData = (event) => {
    console.log(event)
}

const onSearch = async (val) => {
    searchByNameForm.nickName = val
    const res = await Myaxios.post('/searchBynickName', searchByNameForm)
    if(res.data.code === 200){
        users.value = res.data.data
    }
    else{
        showFailToast("搜索失败" + res.data.message)
    }
};


const onCancel = () => {
    searchText.value = "";
    Tagitems.value = originalTagItems;
};

const matchUsers = async () => {
    const res = await Myaxios.post('/matchUsers');
    if(res.data.code === 200){
        console.log(res.data.data)
        users.value = res.data.data
    }else{
        showFailToast("心动模式开启失败" + res.data.message)
    }
}

watch(()=>checked.value, ()=>{
    if(checked.value === true){
        matchUsers();
    }else{
        recommend();
    }
})

const contactMe = (user) =>{
    showConfirmDialog({
        title: '联系我',
        message: user.userEmail,
    })
}

</script>